<template>
	<div class="approveBox">
		<template v-for="(item, index) in approveList">
			<div class="item" :key="index">
				<div class="img">
					<div class="img_box">
						<el-avatar v-if="!item.userList && item.headImg" shape="square" fit="fill " :size="68"
							:src="img + item.headImg" style="background: #D8B581;z-index:1"></el-avatar>
						<el-avatar v-if="!item.userList && !item.headImg" shape="square" fit="fill " :size="68" :src="default_image"
							style="background: #D8B581;z-index:1"></el-avatar>
						<svg-icon v-if="item.type === 2" icon-class="guide" style="color:#fff;font-size: 30px;" />
						<svg-icon v-if="item.type === 1 && item.userList" icon-class="ApprovalPending"
							style="color:#fff;font-size: 35px;" />
						<svg-icon v-if="item.status === 1 && item.type !== 2" icon-class="pass"
							style="width:26px;height:26px;position: absolute;top:50px;left: 50px;z-index:3" />
						<svg-icon v-if="item.status === 0 && item.type === 1" icon-class="Underapproval"
							style="width:26px;height:26px;position: absolute;top:50px;left: 50px;z-index:3" />
						<svg-icon v-if="item.state === 0 && item.type === 1" icon-class="turn"
							style="width:26px;height:26px;position: absolute;top:50px;left: 50px;z-index:3" />
					</div>
					<div class="line_item" v-if="approveList.length - 1 !== index"></div>
				</div>
				<div class="info">
					<div>
						<span> {{ item.title }}</span>
						<span> {{ item.time }}</span>
					</div>
					<div>
						<span style="color:#333">{{ item.name }}</span>
						<span style="color:#333" v-if="item.way === 1">{{ $t('text.countersign') }}</span>
						<span style="color:#333" v-if="item.way === 2">{{ $t('text.orVisa') }}</span>
						<span style="color:#333" v-if="item.state === 1">（{{ $t('text.agreed') }}）</span>
						<span style="color:#333" v-if="item.state === 0">（{{ $t('text.rejected') }}）</span>
						<span style="color:#333" v-if="item.type === 2 && item.status != -1">{{ $t('text.sendCopy')
						}}{{ item.userList.length }}人</span>

					</div>
					<div class="descInfo" v-if="item.state === 0">
						{{ item.describe }}
					</div>
					<div class="copyList" v-if="item.userList">
						<template v-for="(user, userIndex) in item.userList">
							<div class="item">
								<div class="img">
									<el-avatar v-if="user.headImg" shape="square" fit="fill " :size="48" :src="img + user.headImg"
										style="background: #D8B581;z-index:1"></el-avatar>
									<el-avatar v-if="!user.headImg" shape="square" fit="fill " :size="48" :src="default_image"
										style="z-index:1"></el-avatar>
									<svg-icon v-if="user.state === 1" icon-class="pass"
										style="width:20px;height:20px;position: absolute;top:36px;left: 36px;z-index:3" />
									<svg-icon v-if="user.state === 0" icon-class="turn"
										style="width:20px;height:20px;position: absolute;top:36px;left: 36px;z-index:3" />
								</div>
								<div class="name">
									{{ user.name }}
								</div>
							</div>
						</template>
					</div>
				</div>
			</div>
		</template>
	</div>
</template>
<script>
import { getPprovalProcess } from '@/api/public'
import defaultSettings from '@/settings'
export default {
	props: {
		type: {
			type: Number,
			// 审批类型 1:客电修改审批 2:订车审批 3:锁车审批 4:交款审批 5:采购审批 6:调拨审批 7:战败审批 8:退订审批 9:退车审批 10:申请接待 11:定价审批 12:调出审批 13:直接入库审批 14:直购审批 15:作废审批 16:退费审批 17 库存修改审批
			default: null
		},
		propup_type: {
			type: Number, //1  add   2  详情
			default: null
		},
		list: {
			type: Array,
			default: []
		}
	},
	components: {},
	data() {
		return {
			default_image: require('@/assets/images/default_image.png'),
			img: defaultSettings.BASE_IMG,
			approveList: []
		}
	},
	watch: {
		list: {
			handler(val) {
				if (val) {
					this.approveList = this.list
				} else {
					this.list = []
				}
			},
			deep: true
		}
	},
	mounted() {
		//新增-add
		if (this.propup_type === 1) {
			// 审批类型 1:客电修改审批 2:订车审批 3:锁车审批 4:交款审批 5:采购审批 6:调拨审批 7:战败审批 8:退订审批 9:退车审批 10:申请接待
			getPprovalProcess(this.type).then(res => {
				if (res.code === 200) {
					this.approveList = res.data.processInfo
				}
			})
		}
	},
	beforeDestroy() { },
	methods: {}
}
</script>
<style lang="scss" scoped>
.approveBox {
	width: 100%;
	height: auto;
	padding-bottom: 20px;

	&>.item {
		width: 100%;
		height: auto;
		display: flex;
		justify-content: flex-start;

		&>.img {
			width: 68px;
			height: auto;
			position: relative;

			&>.img_box {
				width: 100%;
				height: 68px;
				border-radius: 12px;
				overflow: hidden;
				background: #d8b581;
				display: flex;
				justify-content: center;
				align-items: center;
			}

			&>.line_item {
				width: 1px;
				min-height: 39px;
				height: calc(100% - 88px);
				margin: 10px 34px;
				background: #787880;
				opacity: 0.36;
			}
		}

		&>.info {
			width: calc(100% - 100px);
			margin-left: 16px;

			&>div:nth-child(1) {
				display: flex;
				justify-content: space-between;
				align-items: center;
				line-height: 33px;

				&>span:nth-child(1) {
					font-size: 16px;
					color: #000;
					font-weight: bold;
				}

				&>span:nth-child(2) {
					font-size: 14px;
					color: #666;
				}
			}

			&>div:nth-child(2) {
				font-size: 14px;
				line-height: 20px;

				&> :nth-child(1) {
					color: #333;
				}

				&> :nth-child(2) {
					color: #999;
				}
			}

			&>.descInfo {
				line-height: 22px;
				height: auto;
				min-height: 50px;
				padding: 10px;
				font-size: 12px;
				background: #f3f3f3;
				border-radius: 8px;
				margin-top: 10px;
				display: flex;
				justify-content: space-between;

				&>span {
					font-size: 12px;
				}
			}

			.copyList {
				margin-top: 15px;
				width: 100%;
				height: auto;
				display: flex;
				justify-content: flex-start;
				flex-direction: row;
				flex-wrap: wrap;

				&>.item {
					width: auto;
					height: auto;
					margin-right: 16px;
					margin-bottom: 10px;

					&>.img {
						width: 48px;
						height: 48px;
						position: relative;
					}

					&>.name {
						font-size: 12px;
						text-align: center;
						width: auto;
						line-height: 25px;
						// overflow: hidden;
						// white-space: nowrap;
						// text-overflow: ellipsis;
					}
				}
			}
		}
	}
}
</style>
